最外边加一个div，然后设置此div的margin为0 auto即可。举例：

.wrapper{ width:1300px;margin:0 auto; } //这里是css《body》《div class=“wrapper“》    《div id=“header“》头部《/div》    《div id=“left“》左侧《/div》    ......省略，这里写剩下的div《/div》《/body》

居中问题有两种情况：1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能) 同时要求text-algin:center;必须由各div容器包含着最后强调：各个div直接要统一设置，否则不能都大居中效果。body也设置margin: 0 auto;

body{margin:0;text-align:center}.bt{width:200px;height:50px; margin:0 auto;}《body》《div class=“bt“》《/div》《/body》

使用CSS 语法要设定一个div 水平置中，是很常见到的需求，最多人使用margin: 0 auto; 这个方法就可以达成。但是，如果要让一个div 同时间做到在网页上水平置中还要垂直置中，也就是CSS 上下左右置中这就有点麻烦了，不太容易喔！

利用table中内容在单元格中默认垂直居中的特性。

2.利用css3中的transform属性

3.利用margin属性

4.利用利用position属性把left，top，right，bottom四个的值设为0，再用margin:auto;

最好把你的代码改写了一下，并实现居中效果

效果图

如何使DIV居中,div垂直居中,div水平居中.主要的样式定义如下：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。如何使图片在DIV 中垂直居中用背景的方法。举例：body{BACKGROUND: url(/uploadfiles/2006/05181435734.gif) #FFF no-repeat center;}关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者“bottom right“等，也可以直接写数值“50 30“效果如下：如何使文本在DIV中垂直居中如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：《html》《head》《style》body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}《/style》《/head》《body》《div id=“center“》《p》test content《/p》《/div》《/body》《/html》说明：vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

我们都知道 margin:0 auto; 的样式能让元素水平居中，而 margin: auto; 却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：.Absolute-Center {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;}我并不是第一个发现这种方法的人（不过我还是敢把它叫做“完全居中”），它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论，我甚至根本就不会发现这个办法。上面那篇文章的评论栏中，Simon提供了一个jsFiddle的链接，其他的方法相比之下就相形见绌了。（Priit也在评论栏中提到了同样的方法）。深入研究了一番之后，我又用某些关键词找到了记载这种方法的三个网站：站点一、站点二、站点三。以前从未用过这种方法的我想试试，看看这种”完全居中”的方法到底有多么神奇。 好处：跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）无特殊标记，样式更精简自适应布局，可以使用百分比和最大最小高宽等样式居中时不考虑元素的padding值（也不需要使用box-sizing样式）布局块可以自由调节大小img的图像也可以使用同时注意：必须声明元素高度推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题这种方法在Windows Phone上不起作用浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以运行在IE8~IE10上

CSS剧中代码:center:center; center 类。这意味着两者都将遵守 “.center“ 选择器中的规则。margin-right; 属性设置元素的右外边距。或者这样写text-align; 水平对齐，用以设定元素内文本的水平对齐方式。margin-left:auto:0 auto:auto; 上边间距为0像素,其它三边为auto自动.margin里面这层div的样式加上text-align

css使整个页面背景图片居中,你是可以给一个总的div设置好一定的width和height，然后给它来设置背景图片，在通过margin让他们居中，同时，background的repeat来平铺实现，具体代码：

《html》《head》《style》#div1{width:960px;height:1200px;border:1px soild #f00;background:url(’图片地址’)repeat 0px 0px;margin:0 auto;}《/style》《/head》《body》《div id=’div1’》《/div》《/body》《/html》

1、打开器，新建test.html，用于学习今天的内容。

2、接下来需要在head标签下方引入jquery.min.js插件，如下图所示。

3、在页面的body标签里，新建一个div，名称为test。

4、在body标签下方写上《script》《/script》,用来存放js代码。通过class定位到div，通过css()方法让文字居中。

5、在浏览器中打开test.html，可以在文字在页面中间显示。

text-align: center 只能用于行内元素的水平居中，用在块级元素或容器中是无效的

试试这样：

《div class=“metro-layout horizontal“ style=“margin: 0 auto;“》